<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/mui.indexedlist.css" />
    <style type="text/css">
        span.mui-ellipsis {
            line-height: 42px;
            font-size: 20px;
            color: #000000;
            margin-left: 10px;
        }
    </style>
</head>


<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">通讯录</h1>
    </header>

    <div class="mui-content">
        <ul class="mui-table-view" style="margin-bottom: 20px;">
            <li class="mui-table-view-cell mui-media" style="line-height: 44px;">
                <a href="javascript:;" id="link_request_msg">
                    <span class="mui-icon mui-icon-chatboxes mui-media-object mui-pull-left"></span>
                    <div class="mui-media-body" id="msgcount"></div>
                </a>
            </li>
        </ul>
        <div id="list" class="mui-indexed-list">
            <div class="mui-indexed-list-search mui-input-row mui-search">
                <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索昵称">
            </div>
            <div class="mui-indexed-list-bar">
                <a>A</a>
                <a>B</a>
                <a>C</a>
                <a>D</a>
                <a>E</a>
                <a>F</a>
                <a>G</a>
                <a>H</a>
                <a>I</a>
                <a>J</a>
                <a>K</a>
                <a>L</a>
                <a>M</a>
                <a>N</a>
                <a>O</a>
                <a>P</a>
                <a>Q</a>
                <a>R</a>
                <a>S</a>
                <a>T</a>
                <a>U</a>
                <a>V</a>
                <a>W</a>
                <a>X</a>
                <a>Y</a>
                <a>Z</a>
            </div>
            <div class="mui-indexed-list-alert"></div>
            <div class="mui-indexed-list-inner">
                <div class="mui-indexed-list-empty-alert">没有数据</div>
                <ul class="mui-table-view" id="friendList">
                    <!-- <li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>;
						<li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-media mui-table-view-cell mui-indexed-list-item">
							<img class="mui-media-object mui-pull-left" src="../css/registLogin/avatar.jpg">
							<div class="mui-media-body">
								<p class="mui-ellipsis">你好</p>
							</div>
						</li> -->

                </ul>
            </div>
        </div>


    </div>


</body>
<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/mui.indexedlist.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/nickname.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    mui.init();
    //26个字母外加#
    var enWords = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G',
        'H', 'I', 'J', 'K', 'L', 'M', 'N',
        'O', 'P', 'Q', 'R', 'S', 'T', 'U',
        'V', 'W', 'X', 'y', 'Z', '#'
    ];
    //构建通讯录二维数组模型
    var friendArray = [
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        [],
        []
    ];

    function getIndex(word) {
        //获取字母的索引
        for (var k = 0; k < enWords.length; k++) {
            if (enWords[k] == word.toUpperCase()) {
                return k;
            }
        }
        return enWords.length - 1;
    }

    function ContentPage() {
        var friendList = app.getContactList();
        for (var i = 0; i < friendList.length; i++) {
            //当前好友
            var friend = friendList[i];
            //获取好友的前一个字母
            var word = words.convertPinyin(friend.friendNickname).substring(0, 1);
            var index = getIndex(word);
            //存放好友模型
            friendArray[index].push(friend);
        }
        //渲染页面
        var HTML = '';
        for (var i = 0; i < friendArray.length; i++) {
            var contactArray = friendArray[i];
            if (contactArray.length > 0) {
                var nicknameStarter = enWords[i];
                var groupHTML = '<li data-group="' + nicknameStarter +
                    '" class="mui-table-view-divider mui-indexed-list-group">' + nicknameStarter + '</li>';
                var s = contactArray.length;
                for (var j = 0; j < s; j++) {
                    // console.log(JSON.stringify(contactArray[j]));
                    var imgURL = contactArray[j].friendFaceImage.substring(0, 4) === "http" ? contactArray[j].friendFaceImage : app.imgServerUrl +
                        contactArray[j].friendFaceImage;

                    var friendHTML =
                        `
															<li friendUserId="` + contactArray[j].friendUserId + `" friendNickname="` + contactArray[j].friendNickname +
                        `" friendFaceImage="` + contactArray[j].friendFaceImage +
                        `" class="mui-media mui-table-view-cell mui-indexed-list-item">
																<img friendUserId="` +
                        contactArray[j].friendUserId + `" friendNickname="` + contactArray[j].friendNickname +
                        `" friendFaceImage="` + contactArray[j].friendFaceImage + `" class="mui-media-object mui-pull-left" src="` +
                        imgURL + `">
																<div class="mui-media-body" friendUserId="` + contactArray[j].friendUserId +
                        `" friendNickname="` + contactArray[j].friendNickname +
                        `" friendFaceImage="` + contactArray[j].friendFaceImage + `">
																	<span friendUserId="` +
                        contactArray[j].friendUserId + `" friendNickname="` + contactArray[j].friendNickname +
                        `" friendFaceImage="` + contactArray[j].friendFaceImage + `" class="mui-ellipsis">` + contactArray[j].friendNickname +
                        `</span>
																</div>
															</li>
														`;
                    groupHTML += friendHTML;
                }
                HTML += groupHTML;
            }
        }
        // console.log(HTML);
        document.getElementById('friendList').innerHTML = HTML;
        clearFriendArray();
    }

    //清空通讯录模型数组
    function clearFriendArray() {
        friendArray = [
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            [],
            []
        ]
    }

    function showList() {
        var list = document.getElementById("list");
        list.style.height = document.body.offsetHeight * 1.3 + "px";
        //创建列表显示
        window.indexedList = new mui.IndexedList(list);
    }


    mui.plusReady(function() {
        fetchContactList();
        var thisWeb = plus.webview.currentWebview();
        //获取缓存的好友数据 并且渲染页面
        //从缓存中获取联系人列表，并且渲染到页面
        ContentPage();
        //显示通讯录
        showList();

        document.getElementById('friendList').addEventListener('tap', function(e) {
            var friendNickname = e.target.getAttribute("friendNickname");
            var friendFaceImage = e.target.getAttribute("friendFaceImage");
            var friendUserId = e.target.getAttribute("friendUserId");
            //打开聊天页面
            mui.openWindow({
                url: "wh-chat-page.html",
                id: "wh-chat-page" + friendUserId, //每个好友的聊天页面都是一一对应的
                extras: {
                    friendUserId: friendUserId,
                    friendNickname: friendNickname,
                    friendFaceImage: friendFaceImage
                }
            });

        })


        //初始化消息条数
        mui.ajax(app.serverUrl + '/user/queryRequestMsgCount', {
            data: {
                id: app.getUserGlobalInfo().id
            },
            type: 'post', //HTTP请求类型
            timeout: 10000, //超时时间设置为10秒；
            success: function(data) {
                if (data.status == 200) {
                    var count = data.data;
                    if (count > 0) {
                        document.getElementById("msgcount").innerHTML =
                            `
							<span>好友消息通知</span>
							<span class="mui-badge mui-badge-danger mui-pull-right" style="margin-top: 15px;">` +
                            count + `</span>
							`;
                    } else {
                        document.getElementById("msgcount").innerHTML = `
							<span>好友消息通知</span>
							`;
                    }
                } else { //服务器返回的数据为空,表明账户与密码验证失败
                    app.showToast(data.data, "error"); //弹出错误信息
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    mui.toast("连接超时"); //超过十秒报错
                } else if (textStatus == "error") {
                    mui.toast("连接出错");
                }
            }
        });


        document.getElementById("link_request_msg").addEventListener("tap", function() {
            mui.openWindow({
                id: "wh-requestmsg.html",
                url: "wh-requestmsg.html"
            })

        })

        //获取后端好友数据的函数
        function fetchContactList() {
            var user = app.getUserGlobalInfo();
            mui.ajax(app.serverUrl + '/user/myFriends', {
                data: {
                    id: user.id
                },
                type: 'post', //HTTP请求类型
                timeout: 10000, //超时时间设置为10秒；
                success: function(data) {
                    if (data.status == 200) {
                        app.setContactList(data.data);
                        // console.log(JSON.stringify(data));
                    } else { //服务器返回的数据为空,表明账户与密码验证失败
                        app.showToast(data.data, "error"); //弹出错误信息
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    if (textStatus == "timeout") {
                        mui.toast("连接超时"); //超过十秒报错
                    } else if (textStatus == "error") {
                        mui.toast("连接出错");
                    }
                }
            });

        }





    })
</script>

</html>